<template>
  <div :style="{ backgroundImage: `url(${loginBg})` }" ref="loginContainer" class="login-container">
    <div class="login-wrap">
      <h3 class="login-title">账号登录</h3>
      <a-form class="login-form" size="large" :model="formState" name="basic" autocomplete="off" @finish="onFinish"
        @finishFailed="onFinishFailed">
        <a-form-item name="username" :rules="[{ required: true, message: '请输入账号!' }]">
          <a-input v-model:value="formState.username" placeholder="请输入账号" />
        </a-form-item>

        <a-form-item name="password" :rules="[{ required: true, message: '请输入密码!' }]">
          <a-input-password v-model:value="formState.password" placeholder="请输入账号" />
        </a-form-item>

        <a-form-item name="remember" :wrapper-col="{ span: 24 }">
          <a-checkbox v-model:checked="formState.remember">记住账号</a-checkbox>
        </a-form-item>

        <a-form-item>
          <a-button block plain type="primary" html-type="submit">立即登录</a-button>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { useRouter } from 'vue-router'
import { message } from 'ant-design-vue'
import { login } from '../utils/api'
import { reactive, ref, onMounted } from 'vue';

import bg02 from '../assets/imgs/bg02.jfif'
import bg03 from '../assets/imgs/bg03.jfif'
import bg04 from '../assets/imgs/bg04.jfif'
import bg05 from '../assets/imgs/bg05.jpg'
import bg06 from '../assets/imgs/bg06.jpg'
import bg07 from '../assets/imgs/bg07.jpg'
import bg08 from '../assets/imgs/bg08.jpg'


const router = useRouter()

interface FormState {
  username: string;
  password: string;
  remember: boolean;
}

const loginBg = ref(bg02)
// 切换背景
const switchBackground = () => {
  let bgIndex = 0;
  let bgList = [bg02, bg03, bg04, bg05, bg06, bg07, bg08]
  setInterval(() => {
    bgIndex++
    bgIndex = bgIndex > bgList.length - 1 ? 0 : bgIndex
    loginBg.value = bgList[bgIndex]
  }, 3000)
}
onMounted(() => {
  // 切换背景
  switchBackground()
})

const formState = reactive<FormState>({
  username: '',
  password: '',
  remember: true,
});
const onFinish = async (values: FormState) => {
  // console.log('Success:', values.username);
  const result = await login(values)
  const { data, code, msg } = result.data
  if (code === 200) {
    // 记录登录信息
    localStorage.setItem('adminLoginInfo', JSON.stringify(data))
    // 提示信息
    message.success(msg)
    // 自动跳转到管理中心
    router.push({ name: "manage" })
  } else {
    // 提示信息
    message.error(msg)
  }
};

const onFinishFailed = (errorInfo: any) => {
  console.log('Failed:', errorInfo);
};
</script>
<style scoped lang="scss">
.login-container {
  height: 100vh;
  transition: background 1.5s linear;
  background: url('../assets/imgs/bg02.jfif') no-repeat center/cover;

  .login-wrap {
    padding: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    background: rgba($color: #fff, $alpha: .7);
    border-radius: 10px;
    box-shadow: 0 0 4px 2px #CCC;

    .login-title {
      font-weight: 700;
      text-align: center;
      font-size: 28px;
      margin: 10px 0 20px;
    }

  }
}
</style>